<template>
  <div>
    <el-container>
      <el-header :class="isCollapse ? 'collapse' : ''">
        <div class="logo">
          <img
            :class="isCollapse ? 'rotate' : 'norotate'"
            src="../../assets/Logo.png"
            @click="changeCollapse(!isCollapse)"
            alt=""
            style="width: 50px; height: 50px"
          />
          <div class="logotext">
            <span><span class="tgreen">大 象</span> 健 康 中 心</span><br />
            <span>elephant<span class="tyellow"> healthy</span></span>
          </div>
        </div>
        <Head></Head>
      </el-header>
      <el-container>
        <el-aside width="null">
          <Menu></Menu>
        </el-aside>
        <el-container>
          <el-main :class="isCollapse ? 'main collapse' : 'main'">
            <!-- <router-view></router-view> -->
            <el-tabs
              type="card"
              v-model="$store.state.activeTabName"
              @tab-click="changeTab"
              @tab-remove="closeTab"
            >
              <el-tab-pane
                v-for="item in tabList"
                :key="item.name"
                :name="item.name"
                :label="item.label"
                :closable="item.closable"
              >
                <span slot="label"
                  ><i :class="item.icon"></i> {{ item.label }}</span
                >
                <component :is="item.component"></component>
              </el-tab-pane>
            </el-tabs>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {};
  },
  computed: {
    //映射Vuex中的state属性
    ...mapState(["tabList", "isCollapse"]),
  },
  methods: {
    //映射Vuex 中的函数
    ...mapMutations(["closeTab", "changeCollapse"]),
    changeTab(tab) {
      //console.log('tab: ', tab.name);
      this.$store.commit("changeTab", tab.name);
    },
  },
  components: {
    Head: () => import("../Layout/Head.vue"),
    Menu: () => import("../Layout/Menu.vue"),
  }
};
</script>

<style>
.logo {
  width: 170px;
  float: left;
  height: 50px;
  background-color: rgb(84, 92, 100);
  color: aliceblue;
  padding: 5px 20px 5px 10px;
  transition: width 0.52s;
}
.logo img {
  float: left;
}
.el-header {
  padding: 0px;
  margin: 0px 20px;
  background-color: rgb(84, 92, 100);
}
.el-header.collapse .logo {
  width: 54px;
  padding-right: 0px;
  transition: width 0.52s;
}

.rotate {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg); /* IE 9 */
  -moz-transform: rotate(180deg); /* Firefox */
  -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
  -o-transform: rotate(180deg); /* Opera */
  transition: transform 0.52s;
  transition: -ms-transform 0.52s;
  transition: -moz-transform 0.52s;
  transition: -webkit-transform 0.52s;
  transition: -o-transform 0.52s;
}
.norotate {
  transform: rotate(0deg);
  -ms-transform: rotate(0deg); /* IE 9 */
  -moz-transform: rotate(0deg); /* Firefox */
  -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
  -o-transform: rotate(0deg); /* Opera */
  transition: transform 0.52s;
  transition: -ms-transform 0.52s;
  transition: -moz-transform 0.52s;
  transition: -webkit-transform 0.52s;
  transition: -o-transform 0.52s;
}

.logotext {
  display: block;
  transition: display 0.52s;
  float: left;
  font-size: 14px;
  margin-top: 8px;
}
.collapse .logotext{
  display: none;
  transition: display 0.52s;
}
.tyellow {
  color: rgb(245, 171, 0);
}
.tgreen {
  color: rgb(0, 164, 94);
}
.tblue {
  color: rgb(0, 172, 168);
}

/*自定义布局样式 */
.el-aside {
  /* width: 200px!important;  */
  /* width: 200px; */
  position: fixed;
  left: 28px;
  top: 68px;
  bottom: 0;
  z-index: 666;
  overflow-x: hidden !important;
  /* overflow-y: hidden !important; */
  background-color: rgb(84, 92, 100) !important;
}
.el-main {
  position: absolute;
  left: 200px;
  right: 0;
  top: 68px;
  bottom: 0;
  z-index: 998;
  width: auto;
  overflow-y: auto;
  /* background-color: red; */
  margin-right: 28px;
  margin-left: 30px;
  transition: all 0.35s;
}
.collapse {
  transition: left 0.52s;
  left: 65px;
}
</style>